<template>
  <div class="container integral">
    <div class="integral-info">
      <div class="integral-cells">
        <div>
          <div class="integral-amount">{{userInfo.pay_points}}</div>
          <div class="integral-unit">积分</div>
        </div>
        <div>
          <div class="integral-amount frozen_points">{{userInfo.frozen_points||0}}</div>
          <div class="integral-unit">冻结积分</div>
        </div>
      </div>
      <div class="wallet-controller">
        <i-button type="primary" size="small" @click="$router.push({ path: '/pages/integralMall/integralMall'})"
          i-class="wallet-recharge" shape="circle">去商城兑换</i-button>
      </div>
      <div class="integral-init">
        <p>注：积分由消费产生，进货消费的金额按一定比例获得积分, <br>年底，厂家将根据积分获得情况进行优惠返现福利</p>
      </div>
    </div>
    <div class="detail-list">
      <div class="detail-list-title">积分明细</div>
      <div class="detail-list-body">
        <div class="integral-list" v-if="pointsList">
          <integral-item v-for="(item ,index) in pointsList" :key="index" :data="item"></integral-item>
        </div>
      </div>
    </div>
    <i-load-more v-if="!pointsList&&isLoadEnd" :tip="'暂无数据'" :loading="loading" />
    <i-load-more v-if="!isLoadEnd" :tip="'加载更多数据'" :loading="loading" />
    <i-load-more v-if="pointsList&&isLoadEnd" :tip="'没有更多数据了'" :loading="loading" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  import integralItem from "@/pages/integral/integralItem";
  import request from "@/api/request";
  export default {
    components: {
      integralItem
    },
    data() {
      return {
        page: 1,
        pointsList: null,
        isLoadEnd: false

      };
    },
    computed: {
      ...mapState(['', 'userInfo']),
    },
    methods: {
      ...mapMutations(["setPointsList"]),
      getPoints() {
        request
          .getPoints({
            page: this.page,
            type: 1
          })
          .then(res => {
            if (res.data.length < 20) {
              this.isLoadEnd = true
            }
            let pointsList
            if (this.pointsList) {
              this.pointsList = this.pointsList.concat(res.data)
            } else {
              this.pointsList = res.data
            }
          });
      },
    },
    onReachBottom() {
      this.page++;
      this.getPoints();
    },
    mounted() {
      this.pointsList = null
      this.getPoints();
    }
  };

</script>

<style lang="less">
  .integral-info {
    padding: 30px 0;

    .integral-amount {
      font-size: 24px;
      font-weight: bold;
      color: rgba(238, 117, 89, 1);
      line-height: 1em;
      margin-top: 20px;
      text-align: center;
    }

    .frozen_points {
      font-size: 24px;
      color: #A0A0A0;
    }

    .integral-unit {
      text-align: center;
      font-size: 15px;
      line-height: 1em;
      margin-top: 20px;
      color: rgba(128, 128, 128, 1);
    }

    .integral-init {
      margin-top: 36px;

      p {
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5em;
        color: rgba(160, 160, 160, 1);
      }
    }

    .integral-controller {
      text-align: center;
      margin-top: 36px;
    }

    .integral-recharge {
      width: 180px;
      display: inline-block;
    }
  }

  .detail-list {
    background: #fff;

    .detail-list-title {
      padding: 15px;
      font-size: 15px;
      line-height: 1em;
      font-weight: 500;
      color: rgba(64, 64, 64, 1);
    }

    .detail-list-body {}

    .integral-list {}

  }

  .wallet-controller {
    text-align: center;
    margin-top: 36px;
  }

  .wallet-recharge {
    width: 180px;
    display: inline-block;
  }

  .integral-cells {
    display: flex;

    &>div {
      flex: 1;
    }
  }

</style>
